<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="javax.swing.text.DateFormatter"%>
<%@page import="java.text.DateFormat"%>
<%@page import="java.util.Date"%>
<%@page import="org.ocpsoft.pretty.time.PrettyTime"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />

<link href="${pageContext.request.contextPath}/css/DialogPanel.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/taskDetailPanel.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/AddQuickTaskPanel.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/EditTaskPanelv2.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/TaskPanel.css" rel="stylesheet" type="text/css" />

<link href="${pageContext.request.contextPath}/css/datepicker/jquery-ui-1.8.21.custom-redmond.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/jqwidgets/styles/jqx.base.css" type="text/css" />

<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jqwidgets/jqxdata.js"></script>

<!-- Text box search -->
<style type="text/css">
	.search .searchFormPanel_input_text {padding-bottom: 2px;};
</style>
<!-- End text box search -->

<!-- Date time picker-->
<style type="text/css"> 
	/* css for timepicker */
	.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
	.ui-timepicker-div dl { text-align: left; }
	.ui-timepicker-div dl dt { height: 20px; margin-bottom: -25px; }
	.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
	.ui-timepicker-div td { font-size: 40%; }
	.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</style>
<!-- End date time picker -->

<input type="hidden" name="projectID" value="${projectID}">

<script type="text/javascript">
	//get project id
	var projectID = $('input[name=projectID]').val();
	
	$(document).ready(function () {
		
		// Mark task completed.
		var taskCompleted = $('input[name=completedTaskTitle]').val();
		if(taskCompleted != "")
			$('#markCompletedInfo').fadeIn(500);
		setTimeout(function(){
			$('#markCompletedInfo').fadeOut(1000);
		}, 5000);
		
		// Get user dropdown list
		var theme = getTheme();
        
        var source = {
        	datatype: "json",
        	datafields: [
	             { name: 'username' },
	             { name: 'id' }
             ],
             id: 'id',
             url: "<c:url value='/ajax/project/"+ projectID + "/users'/>",
             async: false
        };
        
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#jqxAssignedTo").jqxDropDownList({
        	source: dataAdapter,
        	displayMember: 'username',
        	valueMember: 'id',
        	width: '150',
        	height: '25',
        	selectedIndex: 0,
        	theme: theme,
        	autoDropDownHeight: true
        });
        //User dropdownlist in pop up
        $("#assignedTo").jqxDropDownList({
        	source: dataAdapter,
        	displayMember: 'username',
        	valueMember: 'id',
        	width: '180',
        	height: '25',
        	selectedIndex: 0,
        	theme: theme,
        	autoDropDownHeight: true
        });
        
        // Dropdown list Category
        var categorySource = {
           	datatype: "json",
           	datafields: [
   	             { name: 'name' },
   	             { name: 'id' }
             ],
             id: 'id',
             url: "<c:url value='/ajax/task/categories'/>",
             async: false
         };
        var categoryDataAdapter = new $.jqx.dataAdapter(categorySource);
        $("#category").jqxDropDownList({
        	source: categoryDataAdapter,
        	displayMember: 'name',
        	valueMember: 'id',
        	width: '180',
        	height: '25',
        	selectedIndex: 0,
        	theme: theme,
        	autoDropDownHeight: true
        }); 
        
     // Dropdown list Projects
        var projectSource = {
           	datatype: "json",
           	datafields: [
   	             { name: 'name' },
   	             { name: 'id' }
             ],
             id: 'id',
             url: "<c:url value='/ajax/task/projects'/>",
             async: false
         };
        var projectDataAdapter = new $.jqx.dataAdapter(projectSource);
        $("#teamProject").jqxDropDownList({
        	source: projectDataAdapter,
        	displayMember: 'name',
        	valueMember: 'id',
        	width: '180',
        	height: '25',
        	selectedIndex: 0,
        	theme: theme,
        	autoDropDownHeight: true
        });
        // Dropdown list Complete task
        var source = [
        	{label: "Today", value:"0"},
            {label: "Yesterday", value:"1"},
            {label: "Last 7 day", value:"7"},
            {label: "This month", value:"30"},
            {label: "Three moths ago", value:"90"},
            {label: "Show all tasks", value:"-1"},		                   
        ];
        
        $("#jqxCompletedTask").jqxDropDownList({ 
        	source: source,
        	width: '170',
        	height: '25',
        	selectedIndex: 0,
        	theme: theme,
        	autoDropDownHeight: true,
        	
        });
        
        // Dropdown list remind email
        var remindEmailSource = [
        	{label: "None", value:"-1"},
            {label: "The same day", value:"0"},
            {label: "The day before", value:"1"},
            {label: "The week before", value:"7"},				                    		                   
        ];
        $("#remindWhen").jqxDropDownList({
        	source: remindEmailSource,
        	width: '130', height: '25',
        	selectedIndex: 0,
        	theme: theme,
        	autoDropDownHeight: true
        });
        
		// Show complete task
        $('#jqxCompletedTask').bind('change', function() {
	         var item = $("#jqxCompletedTask").jqxDropDownList('getSelectedItem');
	         var time= item.value;
	         $.ajax({
	            url : '${pageContext.request.contextPath}/ajax/viewTask',
	            type : "POST",
	            data: { projectID: projectID, time: time },
	            dataType : "html",
	            beforeSend : function() {
	            	$('#completedTasks').html('<p style="text-align:center;"><img  src="${pageContext.request.contextPath}/images/ajax-loader.gif"/></p>').fadeIn();
	            },
	            complete : function() {
	            },
	            success : function(data) {
	                  $('#completedTasks').html(data);
	            },
	            error : function() {
	               alert("Failure args: " + arguments);
	            }
	         });
	         return false;
		});
		
		//
	});
	
	function getIdDropdownList(name){
		var ddlName = '#' + name;
        var item = $(ddlName).jqxDropDownList('getSelectedItem');
        if (item != null) {
            return item.value;
        }
	}
	
	function ShowNewTaskPopup(){
        $( '#newTaskPopup').show(10);
    }
    
	function HideNewTaskPopup(){
		$('#newTaskPopup').fadeOut();
    }
    
    function addQuickTask(){
		var taskName = document.getElementById("taskName").value;
        var assignedTo = getIdDropdownList('jqxAssignedTo');
        
        if (taskName == "" || taskName.length > 200){
        	$('#errorPanelTitle').fadeIn(500);
        }
        else{ 	
        	$.ajax({
	            url : '${pageContext.request.contextPath}/ajax/task/addQuick',
	            type : "POST",
	            data: { projectID: projectID, taskName: taskName, assignedTo : assignedTo },
	            dataType : "html",
	            beforeSend : function() {
	            	$('#imgSpinnerContainer').show();
	            	//$('#tasksList').fadeOut();
	            },
	            complete : function() {
	            	$('#imgSpinnerContainer').hide();
	            	//$('#tasksList').fadeIn();
	            },
	            success : function(data) {
	            	$('#errorPanelTitle').fadeOut(500);
	            	$('#tasksList').html(data);
	            	$('#taskName').val("");
	            	$.ajax({
	            		url : '${pageContext.request.contextPath}/ajax/task/sendMail',
	    	            type : "POST",
	    	            data: {
	    	            	title: taskName,
	    	            	description: 'This task has been created',
	    	            	assignedTo: assignedTo
	    	            	},
	    	            dataType : "html"
	            	});
	            },
	            error : function() {
	               alert("Failure args: " + arguments);
	            }
         });
         	$('#errorPanelTitle').fadeOut(500);
        }
	}
    function addTask(){
		var title = document.getElementById("title").value;
		var description = $('#description').val().trim();
        var assignedTo = getIdDropdownList('assignedTo');
        var category = getIdDropdownList('category');
        var project = getIdDropdownList('teamProject');
        var dueDate = document.getElementById("dueDatePopup").value;
        var estHours = document.getElementById("estHours").value;
        var remindWhen = getIdDropdownList('remindWhen');
        var isSendMail = $('input#emailReminder').is(':checked');
        
        if (title == "" || title.length > 200){
        	$('#errorPanelTitlePopup').fadeIn(500);
        }
        else{ 	
        	$.ajax({
	            url : '${pageContext.request.contextPath}/ajax/task/add',
	            type : "POST",
	            data: {
	            	projectID: projectID,
	            	title: title,
	            	description: description,
	            	assignedTo: assignedTo,
	            	category: category,
	            	project: project,
	            	dueDate: dueDate,
	            	estHours: estHours
	            	},
	            dataType : "html",
	            beforeSend : function() {
	            	$('#imgSpinnerContainerPopup').show();
	            	//$('#tasksList').fadeOut();
	            },
	            complete : function() {
	            	$('#imgSpinnerContainerPopup').hide();
	            	//$('#tasksList').fadeIn();
	            },
	            success : function(data) {
	            	$('#errorPanelTitlePopup').fadeOut(500);
	            	$('#tasksList').html(data);
	            	$('#newTaskPopup').slideToggle(300);
	            	$('#title').val("");
	            	$('#description').val("");
	            	$('#dueDate').val("");
	            	$('#estHours').val("");
	            	// goi ham gui mail
	            	$.ajax({
	            		url : '${pageContext.request.contextPath}/ajax/task/sendMail',
	    	            type : "POST",
	    	            data: {
	    	            	title: title,
	    	            	description: description,
	    	            	assignedTo: assignedTo
	    	            	},
	    	            dataType : "html"
	            	});
	            },
	            error : function() {
	               alert("Failure args: " + arguments);
	            }
         });
         	$('#errorPanelTitlePopup').fadeOut(500);
        }
	}
</script>

<!-- CK editor for more option -->
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
   Wicket.Event.add(window,"domready",function(event) {
      $('#description').tinymce({
            script_url : '${pageContext.request.contextPath}/scripts/tiny_mce/tiny_mce.js',
            theme : "advanced",
            auto_resize : "true",
            relative_urls : false,
            verify_html : false,
            width : "100%",
            plugins : "safari,style,layer,emotions,iespell,paste,xhtmlxtras",
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,paste,pastetext,pasteword,|,bullist,numlist,|,emotions",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_buttons4 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_resizing : false
      });
   });
</script>
<!-- End CK editor for more option -->



<div class="cubeTitleWrapper">
      <span class="cube_title">SharedWorkspaces</span> <span class="wklinks"> <span class="settings"><a
            href="">Settings</a></span>
      </span>
</div>


<div class="cube" >
	<div class="contentwrapper" style="padding-bottom: 100px;">
		<div class="innertube">
			<h2 class="userDefinedBg filter">
				<span class="right_end"><span class="start">Project Tasks</span></span>
				<div class="filter" id="taskPanelSwitch">
					<a href="#" id="assignedTasks50" onclick="if (document.getElementById('spinnerContainer')) (document.getElementById('spinnerContainer')).style.display = 'inline';if (document.getElementById('myTasks')) (document.getElementById('myTasks')).disabled = true;var wcall=wicketAjaxGet('',function() { if (document.getElementById('spinnerContainer75')) { (document.getElementById('spinnerContainer75')).style.display = 'none';}if (document.getElementById('myTasks74')) (document.getElementById('myTasks74')).disabled = false;}.bind(this),function() { alert('There was a communication problem. Please try refreshing your browser');if (document.getElementById('spinnerContainer75')) { (document.getElementById('spinnerContainer75')).style.display = 'none';}if (document.getElementById('myTasks74')) (document.getElementById('myTasks74')).disabled = false;}.bind(this), function() {return Wicket.$('myTasks74') != null;}.bind(this));return !wcall;">Show All</a> 
					<span id="myTasks52"><em>Show Mine</em></span> 
					<span class="loading spinner" style="display: none" id="spinnerContainer">&nbsp;<img src="${pageContext.request.contextPath}/images/throbber.gif"></span>
				</div>
			</h2>
			<div class="contentBlock contentUser">
			<input id="completedTaskTitle" name="completedTaskTitle" type="hidden" value="${completedTaskTitle}" >
						
				<span style="display: none; width: 98%; padding-left: 1%" id="markCompletedInfo" onload="a();">
						<ul  class="feedbackPanel">
							<li class="feedbackPanelINFO">
							<c:set var="completedTaskTitle" value="${completedTaskTitle}"></c:set>
								<span class="feedbackPanelINFO">The task: <a href="${pageContext.request.contextPath}/task/${completedTaskID}/view"><%=StringUtil.subStringToDisplay((String)(pageContext.getAttribute("completedTaskTitle")), 50) %></a> has been marked as completed</span>
							</li>
						</ul>
				</span>
				<div id="addQuickTaskPanel">
					<div class="AddQuickTaskPanelWrapper">
					
					<span id="errorPanelTitle" style="display: none; width: 98%; padding-left: 1%;">
						<ul class="feedbackPanel">
							<li class="feedbackPanelERROR">
								<span class="feedbackPanelERROR">Field 'Title' is a required field or the length of it so long.</span>
							</li>
						</ul>
					</span>
						<span> </span> <img id="foo" class="panelicon" src="${pageContext.request.contextPath}/images/tasks-icon.png" alt="">
						<div class="addTask">
							<span class="title" >Add task</span>
	  
							<form class="addQuickTaskPanel" style="float: left; width: 100%" id="taskForm" method="post" action="">
								<div style="width: 0px; height: 0px; position: absolute; left: -100px; top: -100px; overflow: hidden">
									<input name="taskForm_hf_0" id="taskForm_hf_0" type="hidden">
								</div>
								<div class="form_wrapper">
									<div class="inner_form_wrapper">
										<input class="Text Full taskInput" name="taskName" id="taskName" type="text">

										<div  class="assignTo">
											<p style="font-size: 12px; margin-bottom: 3px;">Assigned to:</p>
											<div id="jqxAssignedTo" style="width: 100%;"></div>
										</div>
									</div>
								</div>
								<div class="options">
									<a class="gcSubmit" id="submittaskLink" style="color: rgb(72, 157, 212);"
										onclick="addQuickTask();">
										Add task 
										<span class="left"></span>
										<span class="right"></span>
										<span  id="spinnerContainer">&nbsp;<img id="imgSpinnerContainer" style="display: none;" src="${pageContext.request.contextPath}/images/loading.gif"></span>
									</a>
									
									<a class="moreOptions" style="color: rgb(72, 157, 212);" href="#" id="more42" onclick="ShowNewTaskPopup();">more options</a> 
									
									
								</div>
							</form>
							<br class="clear">
						</div>
						<span id="taskEditContainer"><span></span></span>
						
						
					</div>
				</div>
	
				<span id="myTaskPanel">
					<div class="taskpanel">
						<ul root="root" class="list tasklist" id="tasksContainer">
							<li class="title" style="padding: 17px 14px 13px;">Whenever</li>
						
							<div id="tasksList">
								<%@include file="controls/c_tasksList.jsp" %>
							</div>
	
							<li class="ct">
								<div class="title" style="padding: 17px 14px 13px;">Complete Tasks</div> 
								<img class="cticon"	src="${pageContext.request.contextPath}/images/task-completed.png" alt="">
								
								<div class="completedTasks">
									<p>Showing completed task from</p>
						        	<div  style="float: left; " id='jqxCompletedTask'></div>
								</div> 
								<br class="clear">
							</li>
							<div id="completedTasks">
								<%@include file="controls/c_completedTask.jsp" %>
							</div>
						</ul>
					</div>
					<div class="spacer"></div>
				</span>
			</div>
			
			<div class="contentBlock_bottom">
				<span class="right_end"><span></span></span>
			</div>
		</div>
	</div>
</div>

<div  id="newTaskPopup" style="display: none;">
	<div  id="dialogContainer">
		<div  id="gcdialog" style="z-index: 10">
			<div class="gcdtitle">
				<span class="title">New Task</span> <a onclick="HideNewTaskPopup();" id="close"></a>
			</div>
			<div class="contentwrapper">
				<div class="content">
					<span id="dialogContent"> <span> </span>
						<%-- <form id="addNewTaskForm" method="get" action="${pageContext.request.contextPath}/task/add"> --%>							
							<div id="fields">
								<span id="errorPanelTitlePopup" style="display: none; width: 98%; padding-left: 1%;">
									<ul class="feedbackPanel">
										<li class="feedbackPanelERROR">
											<span class="feedbackPanelERROR">Field 'Title' is a required field or the length of it so long.</span>
										</li>
									</ul>
								</span>
								<b>Title</b>
								<br> 
									<input style="margin-bottom: 15px; width: 100%; height:25px;" autofocus="autofocus"	class="Text semiFull dialogTaskInput" name="title" id="title" type="text">
								<br>
								 <b>Description</b>
								 <br>
								<textarea style="width: 98%; height: 200px;"  class="Text semiFull"
									name="description" id="description"></textarea>
								<br>
								<div class="assignTask">
									
									<div class="taskDrop">
										<span style="position: relative;"><b>Assign	this task to</b></span>
										<br>
										<div id="assignedTo"></div>
									</div>
									
									<div class="CatDrop">
										<span style="position: relative;"><b>Category</b></span>
										<a style="margin: 3px 0px 0px 10px;" href="${pageContext.request.contextPath}/taskCategories">Edit categories</a>
										<div id="category" style="width: 130px;"></div>
						       		</div>
						       		
									<div class="CatDrop">
										<span style="position: relative;"><b>Project</b></span><br>
						       			<div id="teamProject"></div>
									</div>
									
									<br class="clear"/>
								</div>

								<div class="dueDate">
									
									<div class="dDate" style="width: 130px; ">
										<b>Due date</b>
										<script type="text/javascript">
											 $(document).ready(function() {	
												$('#dueDatePopup').datepicker({});
											 });
										</script>
										<input style="display: block;  height: 25px; width: 100px; text-align: center; font-weight: bold;" class="Text" name="dueDatePopup" id="dueDatePopup" type="text">
									</div>
									
									<div class="estimatedHours" style="width: 110px; margin-right: 0px; ">
										<b>Estimated Hours</b> 
										<script type="text/javascript">
											 $(document).ready(function() {	
												$('#estHours').timepicker({});
											 });
										</script>
										<input class="Text" id="estHours" name="estHours" type="text" style=" height: 25px;width: 82px; text-align: center;font-weight: bold;">
									</div>
										
									<div class="reminder" style="width: 130px;  margin-left: 0px;" >
										<b >Remind assignee</b><br> 
						       			<div id="remindWhen" style="margin-top: 3px;"></div>
									</div>
									
									<div class="options" style="margin-left: 10px;">
										<b>By</b>
										<br>
										<span class="options">
										<input	name="emailReminder" id = "emailReminder" type="checkbox" value="true" checked="checked"> Email
											&nbsp; 
										</span>
									</div>
									<br class="clear">
								</div>
							</div>
							<div class="actionBtns">
								<a class="gcSubmit f_left" href="#"
									onclick="addTask();">
									<span>Add task</span> 
									<span class="left"></span>
									<span class="right"></span>
									<span>&nbsp;<img id="imgSpinnerContainerPopup" style="display: none;" src="${pageContext.request.contextPath}/images/loading.gif"></span>
								</a> or <a id="cancel5b" href="#"onclick="HideNewTaskPopup();">cancel</a>
							</div>
							<div class="spacer">&nbsp;</div>
							<div id="upgradeDialog5c"></div>
						<!-- </form> -->
					</span>
				</div>
			</div>
			<div class="background userDefinedBg"></div>
		</div>
	</div>
</div>

<!-- var check = $('input#emailReminder').is(':checked'); var dueDate = document.getElementById('dueDatePopup').value; if(check == false || dueDate == '' ) { alert('You have not checked on checkbox Email or not choose due date yet.\nPlease try again...'); return false;} var e=document.getElementById('addNewTaskForm'); e.name='submitLink'; e.value='x';var f=document.getElementById('addNewTaskForm');var ff=f;if (ff.onsubmit != undefined) { if (ff.onsubmit()==false) return false; }f.submit();e.value='';e.name='';return false; -->